<template>
    <div class="register-container">
      <!-- 页面背景 -->
      <div class="register-bg"></div>
      
      <!-- 页面内容 -->
      <div class="register-content">
        <!-- 页面标题 -->
        <div class="register-header">
          <h1 class="register-title">创建新账户</h1>
          <p class="register-subtitle">填写以下信息注册您的账户</p>
        </div>
        
        <!-- 注册表单 -->
        <el-form 
          ref="registerFormRef" 
          :model="registerForm" 
          :rules="rules" 
          class="register-form"
          label-width="0"
        >
          <!-- 用户名 -->
          <el-form-item prop="username">
            <el-input 
              v-model="registerForm.username" 
              prefix-icon="User" 
              placeholder="请输入用户名"
            />
          </el-form-item>
          
          <!-- 邮箱 -->
          <el-form-item prop="email">
            <el-input 
              v-model="registerForm.email" 
              prefix-icon="Email" 
              placeholder="请输入邮箱"
            />
          </el-form-item>
          
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input 
              v-model="registerForm.password" 
              prefix-icon="Lock" 
              placeholder="请输入密码"
              show-password
            />
            <!-- 密码强度指示器 -->
            <div class="password-strength" v-if="registerForm.password">
              <div class="strength-bar" :class="{ 'weak': passwordStrength === 'weak', 'medium': passwordStrength === 'medium', 'strong': passwordStrength === 'strong' }" :style="{ width: passwordStrengthWidth }"></div>
              <div class="strength-text">{{ passwordStrengthText }}</div>
            </div>
          </el-form-item>
          
          <!-- 确认密码 -->
          <el-form-item prop="confirmPassword">
            <el-input 
              v-model="registerForm.confirmPassword" 
              prefix-icon="Lock" 
              placeholder="请再次输入密码"
              show-password
            />
          </el-form-item>
          
          <!-- 
          
          <el-form-item prop="phone">
            <el-input 
              v-model="registerForm.phone" 
              prefix-icon="Phone" 
              placeholder="请输入手机号"
            />
          </el-form-item>
          
         
          <el-form-item prop="verifyCode">
            <div class="verify-code-container">
              <el-input 
                v-model="registerForm.verifyCode" 
                prefix-icon="VerificationCode" 
                placeholder="请输入验证码"
                style="width: 60%;"
              />
              <el-button 
                :disabled="countdown > 0" 
                @click="getVerifyCode" 
                class="verify-code-btn"
              >
                {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
           -->
          <!-- 用户协议 -->
          <el-form-item prop="agree">
            <el-checkbox v-model="registerForm.agree">
              我已阅读并同意<a href="#" @click.prevent="showTerms">用户协议</a>和<a href="#" @click.prevent="showPrivacy">隐私政策</a>
            </el-checkbox>
          </el-form-item>
          
          <!-- 注册按钮 -->
          <el-form-item>
            <el-button 
              type="primary" 
              :loading="registerLoading" 
              :disabled="registerLoading"
              @click="handleRegister"
              class="register-btn"
            >
              立即注册
            </el-button>
          </el-form-item>
          
          <!-- 已有账号提示 -->
          <div class="login-link">
            已有账号？<a href="#" @click.prevent="goLogin">立即登录</a>
          </div>
        </el-form>
        
        <!-- 其他注册方式 -->
        <div class="other-login-methods">
          <div class="divider"><span>其他方式注册</span></div>
          <div class="social-buttons">
            <el-button icon="Wechat" circle type="primary" @click="socialLogin('wechat')"></el-button>
            <el-button icon="Qq" circle type="primary" @click="socialLogin('qq')"></el-button>
            <el-button icon="Github" circle type="primary" @click="socialLogin('github')"></el-button>
          </div>
        </div>
      </div>
      
      <!-- 用户协议对话框 -->
      <el-dialog :visible.sync="termsVisible" title="用户协议" width="60%">
        <template #content>
          <div class="terms-content">
            <h3>用户协议条款</h3>
            <p>感谢您注册我们的服务！在使用我们的服务之前，请仔细阅读以下条款。通过注册或使用我们的服务，即表示您同意接受本协议的所有条款和条件。</p>
            <p>1. 服务条款的接受</p>
            <p>当您完成注册程序或以其他方式使用本服务时，即表示您同意接受本服务条款的约束。如果您不同意本服务条款的任何条款，请不要使用本服务。</p>
            <p>2. 服务的使用</p>
            <p>您同意：(a) 提供关于您自己的真实、准确、完整和最新的信息；(b) 维护并及时更新您的注册信息，以保持其真实、准确、完整和最新。</p>
            <p>3. 您的账户</p>
            <p>您将对您的账户和密码的安全性以及在您的账户下发生的所有活动负责。您同意：(a) 立即通知我们任何未经授权使用您的账户或密码的情况；(b) 在每次会话结束后，关闭您的账户。</p>
            <p>4. 终止服务</p>
            <p>我们保留在任何时候终止或暂停您的账户和/或服务的权利，无论是否通知您，也无论是否有理由。在终止您的账户后，您将无法再访问本服务。</p>
            <p>5. 免责声明</p>
            <p>本服务按"原样"和"可用"的基础提供，不提供任何形式的保证，无论是明示的还是暗示的，包括但不限于适销性、特定用途适用性或不侵权的暗示保证。</p>
          </div>
        </template>
        <template #footer>
          <el-button @click="termsVisible = false">我已阅读</el-button>
        </template>
      </el-dialog>
      
      <!-- 隐私政策对话框 -->
      <el-dialog :visible.sync="privacyVisible" title="隐私政策" width="60%">
        <template #content>
          <div class="privacy-content">
            <h3>隐私政策</h3>
            <p>我们尊重并保护您的隐私。本隐私政策旨在帮助您了解我们如何收集、使用、存储和保护您的个人信息。</p>
            <p>1. 信息收集</p>
            <p>我们可能收集的信息包括但不限于：您的姓名、电子邮件地址、电话号码、用户名和密码等。这些信息用于提供和改进我们的服务，以及确保您的账户安全。</p>
            <p>2. 信息使用</p>
            <p>我们使用收集的信息来提供、维护和改进我们的服务，开发新功能和服务，理解用户偏好，并提供个性化内容和推荐。</p>
            <p>3. 信息共享</p>
            <p>我们不会向第三方共享您的个人信息，除非：(a) 获得您的明确许可；(b) 遵守法律要求；(c) 保护我们的权利、财产或安全；(d) 与我们的关联公司或合作伙伴共享，以提供相关服务。</p>
            <p>4. 数据安全</p>
            <p>我们采取合理的安全措施来保护您的个人信息免受未授权访问、使用或泄露。这些措施包括加密技术、访问控制和定期安全审计。</p>
            <p>5. 您的权利</p>
            <p>您有权访问、更正或删除您的个人信息，以及限制或反对某些数据处理活动。您也有权撤回您之前给予的同意。</p>
          </div>
        </template>
        <template #footer>
          <el-button @click="privacyVisible = false">我已阅读</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, watch, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import axios from 'axios'
  
  // 表单数据
  const registerForm = reactive({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    // phone: '',
    // verifyCode: '',
    userType:'1',
    agree: false
  })
  
  // 表单引用
  const registerFormRef = ref(null)
  
  // 表单验证规则
  const rules = reactive({
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 8, message: '密码长度至少为8个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { validator: (rule, value) => {
          if (value !== registerForm.password) {
            return new Error('两次输入的密码不一致')
          }
          return true
        }, trigger: 'blur' }
    ],
    // phone: [
    //   { required: true, message: '请输入手机号', trigger: 'blur' },
    //   { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
    // ],
    // verifyCode: [
    //   { required: true, message: '请输入验证码', trigger: 'blur' },
    //   { min: 6, max: 6, message: '验证码为6位数字', trigger: 'blur' }
    // ],
    agree: [
      { required: true, message: '请阅读并同意用户协议和隐私政策', trigger: 'change' }
    ]
  })
  
  // 密码强度相关
  const passwordStrength = ref('')
  const passwordStrengthText = ref('')
  const passwordStrengthWidth = ref('0%')
  
  // 倒计时相关
  const countdown = ref(0)
  let countdownTimer = null
  
  // 对话框显示控制
  const termsVisible = ref(false)
  const privacyVisible = ref(false)
  
  // 注册加载状态
  const registerLoading = ref(false)
  
  // 监听密码变化，计算强度
  watch(() => registerForm.password, (newVal) => {
    if (!newVal) {
      passwordStrength.value = ''
      passwordStrengthText.value = ''
      passwordStrengthWidth.value = '0%'
      return
    }
    
    // 简单的密码强度评估
    let strength = 0
    
    // 包含小写字母
    if (/[a-z]/.test(newVal)) strength++
    
    // 包含大写字母
    if (/[A-Z]/.test(newVal)) strength++
    
    // 包含数字
    if (/[0-9]/.test(newVal)) strength++
    
    // 包含特殊字符
    if (/[^A-Za-z0-9]/.test(newVal)) strength++
    
    // 长度至少8个字符
    if (newVal.length >= 8) strength++
    
    // 根据强度设置显示
    if (strength <= 2) {
      passwordStrength.value = 'weak'
      passwordStrengthText.value = '弱'
      passwordStrengthWidth.value = '20%'
    } else if (strength <= 4) {
      passwordStrength.value = 'medium'
      passwordStrengthText.value = '中'
      passwordStrengthWidth.value = '50%'
    } else {
      passwordStrength.value = 'strong'
      passwordStrengthText.value = '强'
      passwordStrengthWidth.value = '100%'
    }
  })
  
  // 获取验证码
  const getVerifyCode = () => {
    if (countdown.value > 0) return
    
    // 验证手机号
    registerFormRef.value.validateField('phone', (error) => {
      if (error) {
        ElMessage.error(error)
        return
      }
      
      // 模拟发送验证码
      countdown.value = 60
      ElMessage.success('验证码已发送，请注意查收')
      
      // 倒计时
      countdownTimer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(countdownTimer)
        }
      }, 1000)
    })
  }

  
  // 处理注册
const handleRegister = async () => {
  try {
    // 1. 验证表单
    await registerFormRef.value.validate()
    
    // 2. 检查是否同意协议
    if (!registerForm.agree) {
      ElMessage.error('请先阅读并同意用户协议和隐私政策')
      return
    }

    // 3. 设置加载状态
    registerLoading.value = true

    // 4. 准备请求数据
    const requestData = {
      username: registerForm.username,
      password: registerForm.password,
      email: registerForm.email,
      userType:registerForm.userType
      // phone: registerForm.phone,
      // verifyCode: registerForm.verifyCode
    }

    // 5. 发送POST请求
    const response = await axios.post('/api/auth/addUser', requestData, {
      headers: {
        'Content-Type': 'application/json'
      }
    })

    // 6. 处理成功响应
    if (response.data.code === 200) {
      ElMessage.success('注册成功')
      // 跳转到登录页面
      goLogin()
    } else {
      ElMessage.error(response.data.message || '注册失败')
    }
  } catch (error) {
    // 7. 错误处理
    if (error.response) {
      // 后端返回的错误
      ElMessage.error(error.response.data.message || '注册失败')
    } else if (error.request) {
      // 请求已发出但无响应
      ElMessage.error('网络错误，请检查网络连接')
    } else {
      // 其他错误
      ElMessage.error(error.message || '注册失败')
    }
  } finally {
    // 8. 重置加载状态
    registerLoading.value = false
  }
}

  
  // 显示用户协议
  const showTerms = () => {
    termsVisible.value = true
  }
  
  // 显示隐私政策
  const showPrivacy = () => {
    privacyVisible.value = true
  }
  
  // 前往登录页面
  const goLogin = () => {
    ElMessage.info('跳转到登录页面')
    // 实际项目中这里会有路由跳转
  }
  
  // 社交登录
  const socialLogin = (type) => {
    ElMessage.info(`使用${type === 'wechat' ? '微信' : type === 'qq' ? 'QQ' : 'GitHub'}登录`)
    // 实际项目中这里会有社交登录逻辑
  }
  
  // 组件卸载时清除定时器
  onMounted(() => {
    return () => {
      if (countdownTimer) {
        clearInterval(countdownTimer)
      }
    }
  })
  </script>
  
  <style scoped>
  .register-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
  }
  
  .register-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://picsum.photos/id/1048/1920/1080');
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    opacity: 0.5;
    z-index: 0;
  }
  
  .register-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 450px;
    margin: 20px;
    padding: 40px 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .register-content:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }
  
  .register-header {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .register-title {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
  }
  
  .register-subtitle {
    font-size: 14px;
    color: #666;
  }
  
  .register-form {
    width: 100%;
  }
  
  .register-form .el-input {
    height: 44px;
  }
  
  .register-form .el-input__inner {
    height: 44px;
    border-radius: 8px;
    padding-left: 40px;
    border-color: #e4e7ed;
  }
  
  .register-form .el-input__prefix {
    left: 12px;
  }
  
  .register-form .el-checkbox__label {
    font-size: 13px;
  }
  
  .register-btn {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
  }
  
  .login-link a {
    color: #409eff;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .login-link a:hover {
    text-decoration: underline;
  }
  
  .other-login-methods {
    margin-top: 30px;
    text-align: center;
  }
  
  .divider {
    position: relative;
    margin-bottom: 20px;
  }
  
  .divider span {
    position: relative;
    z-index: 1;
    padding: 0 15px;
    background-color: #fff;
    font-size: 14px;
    color: #999;
  }
  
  .divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e7ed;
    transform: translateY(-50%);
    z-index: 0;
  }
  
  .social-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  
  .social-buttons .el-button {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
  }
  
  .social-buttons .el-button:hover {
    transform: translateY(-3px);
  }
  
  .verify-code-container {
    display: flex;
    gap: 10px;
  }
  
  .verify-code-btn {
    width: 38%;
    height: 44px;
    white-space: nowrap;
    border-radius: 8px;
  }
  
  .password-strength {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
  }
  
  .strength-bar {
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  .strength-bar.weak {
    background-color: #f56c6c;
  }
  
  .strength-bar.medium {
    background-color: #e6a23c;
  }
  
  .strength-bar.strong {
    background-color: #67c23a;
  }
  
  .strength-text {
    font-size: 12px;
    margin-top: 2px;
    text-align: right;
  }
  
  .terms-content,
  .privacy-content {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    font-size: 14px;
    line-height: 1.8;
  }
  
  .terms-content h3,
  .privacy-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  
  .terms-content p,
  .privacy-content p {
    margin-bottom: 15px;
  }
  
  /* 响应式设计 */
  @media (max-width: 576px) {
    .register-content {
      padding: 30px 20px;
      margin: 10px;
    }
    
    .register-title {
      font-size: 24px;
    }
    
    .register-form .el-input {
      height: 40px;
    }
    
    .register-form .el-input__inner {
      height: 40px;
    }
    
    .register-btn {
      height: 40px;
    }
    
    .verify-code-btn {
      height: 40px;
    }
    
    .social-buttons .el-button {
      width: 36px;
      height: 36px;
    }
  }
  </style>  